<template>
  <div
    ref="functionNode4OperationSpaceRef"
    :data-type="type"
    :data-name="name"
    class="function-node-4-operation-space"
    :class="{
      'function-node-4-operation-space-active': dataFlowState.selectedNodes.has(uuid)
    }"
  >
    <div class="node-placeholder">
      <component style="pointer-events: none" :is="operatorTypeInfoMapping.get(type).icon" />
    </div>
    <div class="name">{{ name }}</div>
  </div>
</template>

<script setup lang="ts">
import { operatorTypeInfoMapping } from '@/views/main/data-flow/design/index'
import { useDataFlowState } from '@/model/data-flow/data-flow-state'
import { ref } from 'vue'

defineProps({
  uuid: {
    type: String,
    required: true
  },
  type: {
    type: String,
    required: true
  },
  name: {
    type: String,
    required: true
  }
})

const functionNode4OperationSpaceRef = ref()
const { dataFlowState } = useDataFlowState()
</script>

<style scoped lang="scss">
.function-node-4-operation-space {
  color: #565758;
  width: 150px;
  height: 35px;
  border: 1px solid var(--el-color-info-dark-2);
  border-radius: 5px;
  padding: 5px 5px 5px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  cursor: default;
  border-left: 4px solid var(--el-color-info-dark-2);
  background-color: white;
  user-select: none;

  .node-placeholder {
    width: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;

    span {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .name {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.function-node-4-operation-space:hover {
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}

.function-node-4-operation-space-active {
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
  font-weight: bolder;
}
</style>
